{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    MAC首页
{% endblock %}


{% block meta %}

{% endblock %}


{% block css %}
    <style>
        .download-details {
            padding: 24px 60px 0 50px;
        }
        .mac{
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .page {
            float: right;
            margin-right: 60px;
        }
        td,th {
            text-align: center;
        }
        .mac_record_nums {
            width: 114px;
            float: right;
            padding-top: 20px;
            padding-right: 10px;
        }
        .mac_count {
            float: right;
            padding-top: 28px;
            padding-right: 10px;
        }
        .mac_count span {
            font-weight: bold;
            color: #337ab7;
        }
         #id_a {
            margin-top: 20px;
            margin-left: 20px;
        }
        .delivery_mac {
            margin-top: 20px;
            margin-left: 47px;
        }
    </style>
{% endblock %}


{% block content %}
    <div id="id_a"><a class="btn btn-default" href="{% url 'query_delivery_order' %}" role="button">返回</a></div>
    <div class="mac">
        <h3>出货mac<small> 详情</small></h3>
    </div>
    <div class="delivery_mac">
        <a href="{% url 'download_delivery_mac' oid%}"
                 class="btn btn-success"><i class="fa fa-download" aria-hidden="true"></i> 下载</a>
    </div>
    <div class="table-responsive download-details">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>MAC地址</th>
              <th>uuid</th>
              <th>型号model</th>
              <th>board</th>
              <th>国家码</th>
              <th>cmagent用户名</th>
              <th>cmagent密码</th>
              <th>cmagent_server</th>
              <th>私key</th>
              <th>服务器公key</th>
              <th>内网IP</th>
              <th>服务器IP</th>
              <th>服务器端口</th>
              <th>特殊字段</th>
            </tr>
          </thead>
          <tbody>
            {% for obj in mac_query %}
                <tr>
                  <th scope="row">
                      <span class="forloop">{{forloop.counter}}</span>
                  </th>
                  <td>{{ obj.mac }}</td>
                  <td>{{ obj.uuid }}</td>
                  <td>{{ obj.model }}</td>
                  <td>{{ obj.board }}</td>
                  <td>{{ obj.country }}</td>
                  <td>{{ obj.deviceid }}</td>
                  <td>{{ obj.secret }}</td>
                  <td>{{ obj.mqtt }}</td>
                  <td>{{ obj.private_key }}</td>
                  <td>{{ obj.public_key }}</td>
                  <td>{{ obj.address }}</td>
                  <td>{{ obj.endpoint_host }}</td>
                  <td>{{ obj.endpoint_port }}</td>
                  <td>{{ obj.future }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>

    <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            {{ pages | safe }}
          </ul>
        </nav>
    </div>
    <div class="mac_record_nums">
        <select id="mac_record_nums" name="mac_record_nums" class="form-control">
              <option value="5">每页5条</option>
              <option value="10">每页10条</option>
              <option value="15">每页15条</option>
              <option value="20">每页20条</option>
              <option value="25">每页25条</option>
              <option value="30">每页30条</option>
              <option value="40">每页40条</option>
        </select>
    </div>
    <div class="mac_count">
        总共 <span>{{ mac_count }}</span> 条MAC记录
    </div>
{% endblock %}


{% block js %}
    <script>
        var page_size = "{{ page_size }}";
        var $option_list = $('#mac_record_nums option');
        $.each($option_list,function(i, Ele){
            if (page_size === Ele.getAttribute('value')) {
                Ele.setAttribute('selected','selected')
            }
        });
        $('#mac_record_nums').change(function () {
            window.location.replace("{% url 'details_delivery_order' oid %}"+"?"+"page_size="+$(this).find('option:selected').val());
        })
    </script>
{% endblock %}
